html,
body,
.page-wrap {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Lantinghei SC", "WenQuanYi Micro Hei", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiOne Mozilla", "Segoe UI Symbol", EmojiSymbols;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #F4F4F4;
  color: #333;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-size: 14px;

  &__main {
    flex: 1;
    position: relative;
  }

  &__scroller {
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
  }

  &__header {
    height: 45px;
    background: #fff;
    text-align: center;
    position: relative;
    line-height: 45px;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    z-index: 1;

    &-btn-back,
    &-btn-chart,
    &-btn-link {
      position: absolute;
      height: 45px;
      top: 0;
      border: 0;
      outline: none;
      background: transparent;
    }

    &-btn-back {
      width: 45px;
      left: 0;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border-left: 1px solid #333;
        border-top: 1px solid #333;
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }

    &-btn-chart,
    &-btn-link {
      right: 0;
      color: #666;
      font-size: 14px;

      &::before {
        content: "";
        display: inline-block;
        vertical-align: bottom;
        margin-right: 3px;
        width: 14px;
        height: 14px;
        background-image: url(../images/icon-chart.png);
        background-size: 100% 100%;
      }
    }

    &-btn-link {
      &::before {
        background-image: url(../images/icon-link.png);
      }
    }
  }

  &__footer {
    height: 50px;
    border-top: 1px solid #e7e7e7;
    background: #fff;
  }
}

.menus {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;

  &__list {
    flex: 1;
    text-align: center;
    color: #a8a8a8;
  }

  &__link {
    display: inline-block;
    padding: 8px 10px 0;

    &::before {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 auto;
      background-size: 100% 100%;
    }

    &--current {
      color: #dc0000;
    }
  }
}

@each $icon in home,
special,
concern {
  .menus__link-#{$icon}::before {
    background-image: url(../images/nav/#{$icon}.png);
  }

  .menus__link--current.menus__link-#{$icon}::before {
    background-image: url(../images/nav/#{$icon}-red.png);
  }
}

.title {
  padding: 8px;
  font-size: 14px;
}

.label {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid;
  padding: 0 3px;
  border-radius: 2px;
  font-size: 10px;

  &--orange {
    color: #EB9C1A;
  }
}

.text {
  &--red {
    color: #D70D17;
  }

  &--pink {
    color: #FE4543;
  }

  &--light-gray {
    color: #999999;
  }

  &--blue {
    color: #558eff;
  }

  &--green {
    color: #2fcb77;
  }

  &--orange {
    color: #f86e03;
  }
}

.bg-white {
  background: #fff;
}

.bg-gray {
  background: #f5f5f5;
}

.container {
  background: #fff;
  top: 8px;
}

.footer-tip {
  text-align: center;
  color: #CBCBCB;
  font-size: 10px;
  padding: 8px;

  &::before {
    content: "!";
    display: inline-block;
    background: #CBCBCB;
    color: #fff;
    width: 12px;
    height: 12px;
    line-height: 12px;
    vertical-align: baseline;
    border-radius: 50%;
    margin-right: 3px;
  }
}

.trend {
  padding: 0 10px 0 5px;
  position: relative;
  display: inline-block;

  &::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    right: 0;
    top: 50%;
    margin-top: -6px;
    background-size: 100% 100%;
  }

  &--asc {
    color: #D70D17;

    &::after {
      background-image: url(~@/assets/images/icon-asc.png);
    }
  }

  &--desc {
    color: #0BBA61;

    &::after {
      background-image: url(~@/assets/images/icon-desc.png);
    }
  }

  &--zero {
    color: #FF9900;

    &::after {
      content: "";
      position: absolute;
      width: 7px;
      height: 10px;
      right: 0;
      top: 50%;
      margin-top: 0;
      border-top: 1px solid;
    }
  }
}

.init-tabs {

  .van-tab {
    border-bottom: 1px solid #e7e7e7;
    font-size: 13px;
    height: 36px;
    line-height: 36px;
    color: #515151;

    &--active {
      font-size: 15px;
      color: #333;
    }
  }

  .van-sticky {
    height: 36px;
  }

  &.van-tabs--line .van-tabs__wrap {
    height: 36px;
    margin-bottom: 10px;
  }

  .van-tabs__line {
    z-index: auto;
    height: 2px;
    width: 30px !important;
  }

  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    width: 0;
  }
}

.pd {
  &-aside {
    padding: 0 12px;
  }
}


.page-title {
  padding: 12px;

  &__title {
    font-size: 20px;
    margin-bottom: 5px;
  }

  &__time {
    color: #929292;
  }
}

.align {
  &-center {
    text-align: center;
  }
}

.box {
  padding: 10px 12px;

  &__head {
    display: flex;
    margin-bottom: 10px;
    align-items: center;

    &--with-border {
      padding-left: 10px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 20px;
        background: #D70D17;
        left: 0;
        top: 50%;
        margin-top: -10px;
      }
    }

    &-left {
      flex: 1;
    }

    &-right {
      flex: none;
    }

    &-title {
      font-size: 16px;
    }

    &-action {
      display: inline-block;
      border: 1px solid #d7d7d7;
      color: #7F7F7F;
      border-radius: .75em;
      padding: 0 8px;

      & + & {
        margin-left: 5px;
      }

      &--selected {
        color: #D70D17;
        border-color: #D70D17;
        background-color: #fcedee;
      }
    }
  }
}

.table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;

  th {
    font-weight: normal;
    background: #ff716b;
    color: #fff;
    padding: 5px;
  }

  td {
    padding: 8px 0;
  }

  &--stripe {
    tr:nth-child(2n){
      background: #f2f2f2;
    }
  }
}

.show-more {
  text-align: center;
  line-height: 32px;
  color: #999999;
}

.radius {
  &--samll {
    border-radius: 2px;
  }
}

.mgb-15 {
  margin-bottom: 15px;
}

.mgb-10 {
  margin-bottom: 10px;
}

.mgb-8 {
  margin-bottom: 8px;
}

.mgb-4 {
  margin-bottom: 4px;
}

.selects {
  display: flex;
  border: 1px solid #E5E5E5;
  border-radius: 2px;
  margin-bottom: 15px;

  &__item {
    flex: 1;
    border: 0;
    padding: 5px 10px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-right: 1px solid #929292;
      border-bottom: 1px solid #929292;
      right: 10px;
      top: 50%;
      -webkit-transform: translateY(-70%) rotate(45deg);
      transform: translateY(-70%) rotate(45deg);
      pointer-events: none;
    }

    &+& {
      border-left: 1px solid #E5E5E5;
    }

    select {
      border: 0;
      display: block;
      width: 100%;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      outline: none;
      background: transparent;
    }

    select:disabled {
      color: #929292;
    }
  }
}

.disabled {
  pointer-events: none;
  background: #f4f4f4;
  color:#999999;
}


.building {
  text-align: center;
  font-size: 18px;
  color: #999;
  padding-top: 200px;

  &::before {
    content: "";
    display: block;
    margin: 0 auto 15px;
    width: 180px;
    height: 141px;
    background-image: url(~@/assets/images/icon-building.png);
    background-size: 100% 100%;
  }
}

.title-bg {
  background: url(~@/assets/images/title_bg.png) center no-repeat;
  background-size: 100% 90px;
  height: 90px;
  color: #fff;
  font-size: 20px;
  line-height: 90px;
  text-align: center;
  text-shadow: 0px 5px 5px rgba(215, 14, 24, 0.5);

  &__btn {
    width: 24px;
    height: 24px;
    background: url(~@/assets/images/icon-tip.png) center no-repeat;
    background-size: 70% 70%;
    border: 0;
    outline: none;
    padding: 0;
    vertical-align: middle;
  }
}

.target-banner {
  background: linear-gradient(to right, #fd5c9c, #fe8869);
  text-align: center;
  border-radius: 10px;
  color: #fff;
  margin-bottom: 10px;
  padding: 20px 0;

  &__num {
    padding: 0 6px;
    font-size: 32px;
    font-weight: bold;
  }
  &__blocks {
    display: flex;
  }
  &__block {
    flex: 1;
    box-sizing: border-box;
    border-right: 0.5px solid rgba(255, 255, 255, 0.2);
    padding: 0 15px;

    &:last-child {
      border-right: none;
    }
  }
  &__block-num {
    font-size: 17px;
    font-weight: bold;
  }
  &__name {
    font-size: 18px;
    font-weight: bold;
  }
}

.pickers {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E7E7E7;
  position: relative;
  z-index: 1;
  font-size:12px;

  &__item {
    flex: 1;
    height: 30px;
    line-height: 30px;
    position: relative;
    padding: 0 16px;

    &::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-right: 1px solid #929292;
      border-bottom: 1px solid #929292;
      right: 16px;
      top: 50%;
      transform: translateY(-70%) rotate(45deg);
      pointer-events: none;
    }

    & + .pickers__item {

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        border-left: 1px solid #E7E7E7;
      }
    }
  }
}

.tip-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 200;

  &__header {
    text-align: center;
    height: 42px;
    font-size: 15px;
    line-height: 42px;
    background: #D70D17;
    color: #fff;
    position: relative;
    border-radius: 5px 5px 0 0;
  }

  &__close {
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    right: -25px;
    top: -20px;
    outline: none;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 0;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 1px;
      left: 50%;
      top: 50%;
      background: #fff;
    }

    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }

  &__main {
    position: absolute;
    width: 75%;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: #fff;
  }

  &__body {
    overflow: auto;
    padding: 10px 15px;
    max-height: 480px;
    -webkit-overflow-scrolling: touch;
  }

  &__item {
    padding-bottom: 12px;

    & + & {
      padding-top: 10px;
      border-top: 1px solid #E5E5E5;
    }

    &-title {
      color: #333;
      margin-bottom: 10px;
    }

    &-intro {
      background: #F5F5F5;
      border: 1px dashed #DCDCDC;
      color: #666;
      border-radius: 5px;
      font-size: 12px;
      padding: 5px;
      margin-bottom: 10px;
    }

    &-detail {
      font-size: 12px;
      color: #999;
      white-space: pre-line;
    }
  }
}

.water-mark-wrap {
  position: relative;
}

.page-menus {
  padding: 30px 15px 0 15px;

  &__title {
    font-size: 16px;
    color: #FF4B47;
    margin-bottom: 20px;
  }

  &__item {
    font-size: 15px;
    margin-bottom: 20px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
      right: 4px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }
}
/*.vxe-table--empty-placeholder,.vxe-table--empty-block {
  display: none;
}
.vxe-table--body-wrapper{
  height: auto!important;
}
.vxe-header--column{
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  background-color: #ff716b
}
.vxe-table--body{
  //border-top: 1px solid #d80c18;
}
.vxe-cell{
  height: 22px;
}
.vxe-body--column{
  border-bottom: 1px dashed #dddddd;
}
.vxe-body--column.col--left{
  text-align: left;
}
.vxe-body--column.col--right{
  text-align: right;
}
.vxe-body--column.col--center{
  text-align: center;
}
.vxe-cell--title{
  font-size: 14px;
  color: #ffffff;
  font-weight: normal;
}*/

.vxe-header--column{
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  background-color: #ff716b
}
.vxe-cell--title{
  font-size: 14px;
  color: #ffffff;
  font-weight: normal;
}
.vxe-table--render-default .vxe-body--column, .vxe-table--render-default .vxe-footer--column, .vxe-table--render-default .vxe-header--column{
  padding: 0px 0px;
  line-height: 15px;
}
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis), .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis), .vxe-table--render-default .vxe-header--column:not(.col--ellipsis){
  padding: 0px 0px;
  line-height: 15px;
  height: 25px;
}
.vxe-body--row{
  height: 30px;
}
.vxe-table--render-default .vxe-body--column.col--ellipsis, .vxe-table--render-default.vxe-editable .vxe-body--column, .vxe-table--render-default .vxe-footer--column.col--ellipsis, .vxe-table--render-default .vxe-header--column.col--ellipsis{
  height: 30px;
}
